const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    //打包环境
    //production：压缩代码
    //development：不压缩代码
    mode: 'development',
    //cheap-仅限行  module-第三方包的错误也映射 eval-直接引用源代码  速度最快
    devtool: 'cheap-module-eval-source-map',//development：不压缩代码
    // devtool: 'cheap-module-source-map',//production：压缩代码
    devServer: {
        contentBase: './dist',
        //自动打开浏览器
        open: true,
        port: 8080,
        // 开启Hot Module Replacement
        hot: true,
        // 即便hmr的功能没有生效，浏览器也不要自动刷新
        // if(module.hot) {
        //     module.hot.accept('./test.js', () => {
        //         // 当模块发生变动执行当前方法  配合hotOnly在业务代码里面使用
        //     })
        // }
        // hotOnly: true,
        proxy: {
            "/api": "http://localhost:3000"
        }
    },
    entry: {
        main: './src/index.jsx',
    },
    output: {
        //如果将JS放到云端  这里配置地址
        // publicPath:'http://cdn.com.cn',
        filename: '[name].js',
        //同默认配置 此处可不写
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 600,
                            //占位符配置法,此配置名称与原始文件一致  后面加了一个Hash值
                            name: '[name]-[hash].[ext]',
                            outputPath: 'images/'
                        }
                    }
                ]
            }, {
                test: /\.(scss)$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                    options: {
                        importLoaders: 2,//如果遇到了引入文件  重新返回2步打包
                        modules: true
                    }
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }, {
                    loader: "postcss-loader" // 将 Sass 编译成 CSS
                }]
            }, {
                test: /\.(css)$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                    options: {
                        importLoaders: 1,//如果遇到了引入文件  重新返回2步打包
                        modules: true
                    }
                }, {
                    loader: "postcss-loader" // 将 Sass 编译成 CSS
                }]
            }, {
                test: /\.(js|jsx)$/,
                //排除的文件
                exclude: /node_modules/,
                loader: "babel-loader",
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html' }),
        new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: ['dist'] }),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true
    }
}